<template>
  <main>
    <el-table
      :data="memberList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      border
      style="width: 100%;border:1px solid #00BDAC;"
      height="95%"
      :header-cell-style="{borderRight:'none',backgroundColor:'#00BDAC',color:'#FFFFFF'}"
    >
      <el-table-column align="center" type="index" :index="table_index" width="50px" label="序号"></el-table-column>
      <el-table-column align="center" prop="name"  label="姓名"></el-table-column>
      <el-table-column align="center" prop="tel"  label="联系电话"></el-table-column>
      <el-table-column align="center" prop="address" label="居住地址"></el-table-column>
      <el-table-column align="center" prop="job" label="目前岗位"></el-table-column>
      <el-table-column align="center" prop="account" label="系统账号"></el-table-column>
      <!--<el-table-column align="center" label="管理" width="150px">
        <template slot-scope="scope">
          <el-button size="mini" class="greenButton" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" style="background-color: #FB1C89;color: #FFFFFF;" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>-->
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pagesize"
      layout="total,prev, pager, next, jumper"
      :total="memberList.length"
      prev-text="上一页"
      next-text="下一页"
    ></el-pagination>

    <el-dialog destroy-on-close :visible.sync="isShowEdit" :show-close="false" class="edit-dialog" width="1100px">
         <div slot="title" class="edit-dialog-title">编辑巡检人员信息</div>
      <el-form :model="memberInfo" class="edit-form" label-width="100px" label-position="left">
        <el-form-item label="姓　　名：">
          <el-input class="add-input" v-model="memberInfo.name" placeholder="输入姓名"></el-input>
        </el-form-item>
         <el-form-item label="工　　号：">
          <el-input class="add-input" v-model="memberInfo.account" placeholder="请输入工号"></el-input>
        </el-form-item>
       
        <el-form-item label="年　　龄：">
          <el-input class="add-input" v-model="memberInfo.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="居住地址：">
          <el-input class="add-input" v-model="memberInfo.address" placeholder="请输入居住地址"></el-input>
        </el-form-item>
        <el-form-item label="目前岗位：">
          <el-input class="add-input" v-model="memberInfo.job" placeholder="请输入岗位名称"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：">
          <el-input class="add-input" v-model="memberInfo.tel" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item label="设置密码：">
          <el-input type="password" class="add-input" v-model="memberInfo.password" placeholder="请设置密码"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="cancel" class="pinkButton" type="primary">取消</el-button>
        <el-button @click="submit" class="greenButton" type="primary">提交</el-button>
      </div>
    </el-dialog>
  </main>
</template>

<script>
export default {
  data: function() {
    return {
      currentPage:1,
      pagesize:10,
      memberList: [
          /*{
              order:1,
              name:'张三',
              tel:1888888888,
              address:'xx区xx路xx小区251',
              job:'资产管理处资管员',
              account:'1888888888'
          },
          {
              order:2,
              name:'张一',
              tel:1888888888,
              address:'xx区xx路xx小区251',
              job:'资产管理处资管员',
              account:'1888888888'
          },
          {
              order:3,
              name:'张四',
              tel:1888888888,
              address:'xx区xx路xx小区251',
              job:'资产管理处资管员',
              account:'1888888888'
          },
          {
              order:4,
              name:'王五',
              tel:1888888888,
              address:'xx区xx路xx小区251',
              job:'资产管理处资管员',
              account:'1888888888'
          },*/
      ],
      isShowEdit: false,
      memberInfo: {
        name: "",
        tel: "",
        age: "",
        address: "",
        job: "",
        account: "",
        password: ""
      }
    };
  },
  created(){
    this.ajaxCommon.ajax({
      url: 'numberList',
      success: (res) => {
        var list = [];
        var currentLen = this.memberList.length;
        Object.keys(res).forEach((index)=>{
          var item = res[index];
          currentLen += 1;
          list.push({
            name: item.u_name,
            order: currentLen,
            tel: item.u_tel,
            address: item.u_address,
            job: item.u_post,
            age: item.u_age,
            id: item.u_id,
            account: item.u_account
          })
        });
        this.memberList = this.memberList.concat(list)
      }
    });
  },
  methods: {

    table_index(index){
        return (this.currentPage -1) * this.pagesize + index + 1
      },
    //分页
    handleCurrentChange(val){
      this.currentPage = val;
    },
    handleEdit(index, row) {
      let copy = Object.assign({}, row);
      copy.password = '';
      this.memberInfo = copy;
      console.log(copy);
      /*memberInfo: {
        name: "df",
          tel: "fdf",
          age: "gfg",
          address: "sdf",
          job: "fgf",
          account: "gf",
          password: ""
      }*/
        this.isShowEdit = true;
    },

    handleDelete(index, row) {
      console.log(row);
      this.$confirm('此操作将永久删除巡检人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          this.ajaxCommon.ajax({
            url: 'numberDel',
            urlConcat: row.id,
            success: (res)=>{
              console.log(res);
              if(res.code==200){
                var list = this.memberList;
                var index = -1;
                for(var i=0;i<list.length;i++){
                  if(list[i].id == row.id){
                    index = i;
                    break;
                  }
                }
                if(index>=0){
                  list.splice(index,1);
                  this.memberList = list;
                }
                this.ajaxCommon.notice('删除成功');
              } else {
                this.ajaxCommon.notice('删除失败',3);
              }
            }
          });
      }).catch(() => {
        /*this.$message({
          type: 'info',
          message: '已取消删除'
        });*/
      });
    },

    submit(){
      var data = this.memberInfo;
      var id = data.id;
      var param = {
        u_name: data.name,
        u_age: data.age,
        u_post: data.job,
        u_tel: data.tel,
        u_address: data.address,
        u_account: data.account,
      };
      if(data.password){
        param.u_pass = data.password;
      }
      console.log(param);
      this.ajaxCommon.ajax({
        url: 'numberEdit',
        urlConcat: id,
        data: param,
        success: (res)=>{
          console.log('---------------')
          console.log(typeof res,res)
          if(res.code==200){
            this.isShowEdit = false;
            var list = this.memberList;
            for(var i=0;i<list.length;i++){
              if(list[i].id == id){
                console.log(id);
                console.log({
                  name: data.name,
                  age: data.age,
                  post: data.job,
                  tel: data.tel,
                  address: data.address,
                  account: data.account,
                })
                console.log(list[i])
                list[i] = Object.assign(list[i], {
                  name: data.name,
                  age: data.age,
                  post: data.job,
                  tel: data.tel,
                  address: data.address,
                  account: data.account,
                });
                break;
              }
            }
            this.memberList = list;
            this.ajaxCommon.notice('修改成功')
          }
          else{
            this.ajaxCommon.notice(res.status, 2);
          }
        }
      });
    },
    cancel(){
      this.isShowEdit = false;
    }
  }
};
</script>

<style lang="less" scoped>
main {
  width: 100%;

  .edit-dialog-title {
    color: #ffffff;
    padding-left: 30px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    background: #00bdac;
  }

  .add-input {
    width: 260px;
  }

  .edit-form {
    width: 100%;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
  }
}
</style>

<style lang="less">
main {
  .edit-dialog {
    .el-dialog__header {
      padding: 0;
    }

    .el-dialog__body {
      padding: 30px;
      height: 450px;
      overflow: auto;
    }
  }
}
</style>
